<template>
  <a-divider>今日TODO</a-divider>
  <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"
      :data-source="props.todayTodoList"
      :pagination="pagination">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-card :title="item.title">
          <a-space direction="vertical">
            <a-typography-text :delete="item.isFinish">{{item.todoProfile}}</a-typography-text>
            <div>
              <a-space :size="200" direction="horizontal">
                <a-checkbox v-model:checked="item.isFinish" :disabled="false" @change="changeStatus(item)">
                  完成
                </a-checkbox><a-popconfirm
                  title="Are you sure delete this task?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirm(item)"
                  @cancel="cancel"
              >
                <a-button danger>DELETE</a-button>
              </a-popconfirm>

              </a-space>
            </div>
          </a-space>
        </a-card>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup>
import {message} from "ant-design-vue";
import myAxios from "../axios.js";

const props = defineProps({
  todayTodoList: {
    type: Array,
    default(){
      return [];
    }
  }
})
const pagination = {
  onChange: (number) => {
    console.log(page);
  },
  pageSize: 6,
};
const confirm = (item) => {
  myAxios.delete('/todo/delete?todoId='+item.id).then(
      res => {
        if(res.code === 0 && res.data){
          let index = props.todayTodoList.indexOf(item);
          props.todayTodoList.splice(index,1);
          message.success('删除成功')
        }else{
          message.error("删除失败");
        }
      }
  )

};

const cancel = () => {
  message.error('Click on No');
};
const changeStatus = (item) => {
  myAxios.post('/todo/changeStatus',{
    todoId : item.id
  }).then(
      res => {
        if(res.code === 0 && res.data){
          message.success(item.isFinish?'恭喜完成':'成功取消');
        }else{
          message.error("数据同步失败");
        }
      }
  ).catch(
      e => {
        console.log("todo状态切换发生问题");
      }
  )
}
</script>

<style scoped>

</style>